<template>

	<view id="found">
		<view class="found_search">
			<u-search placeholder="搜索创作者名字" bgColor="#f6f6f6" borderColor="#f3f3f3" height="40" v-model="searchValue"
				:showAction="false" @search="search()"></u-search>
		</view>
		
		<view class="container">
			<scroll-view class="scroll-view">
				<view class="grid">
					<view v-for="(item, index) in cateList" :key="index"
						:class="['item', { 'selected': selectedIndex === index }]" @click="selectItem(item, index)">
						<image :src="item.cover" class="item-image" mode="aspectFill"></image>
						<text class="item-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>


		<view :class="[{ 'active': activeIndex === item.id }, 'found_content']" v-for="(item,index) in list"
			:key="index" @click="setActive(item.id)">
			<view class="found_content_img">
				<image :src="item.backimg" mode="widthFix"></image>
			</view>
			<view class="found_content_text">
				<u-row gutter="0">
					<u-col span="3" @click="gotoP(item.id)">
						<view class="found_content_text_img">
							<image :src="item.headimg" mode="widthFix"></image>
						</view>
					</u-col>
					<u-col span="9">
						<view class="found_content_text_text">
							<view class="fontsizess">{{item.nickname}} <text class="title"
									v-if="item.user_creation_cate_id">{{item.user_creation_cate_id.name }} </text>
							</view>
							<!-- <text class="title" v-if="item.user_creation_cate_id">{{item.user_creation_cate_id.name }} </text> -->
							<view class="fontsize">{{item.readme}}</view>
							<view class="fontsize">{{item.payNum}}人已购买</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-loadmore :status="status" @loadmore="lists" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				activeIndex: null,
				keyword: '',
				chooseValue: "",
				placeholder: '',
				clickShow: false,
				selectName: '请选择',
				list: [],
				cateId: '',
				page: 1,
				limit: 10,
				noMoreData: false,
				loading: false,
				status: 'more',
				cateList: [],
				selectedIndex: null, // 选中的索引
			}
		},
		mounted() {
			this.getCateList();
			this.lists(); // 只调用这个
		},
		onReachBottom() {
			if (this.status === 'more') {
				this.lists();
			}
		},
		watch:{
			searchValue(newVal,oldVal) {
				 if(newVal == ''){
					 this.lists()
				 }
			}
		},
		methods: {
			search() {
				this.page = 1; // 重置页码
				this.list = []; // 重置列表
				this.lists(); // 获取新数据
			},
			selectItem(item, index) {
			    if (this.selectedIndex === index) {
			        this.selectedIndex = null; // 取消选中状态
			        this.cateId = ''; // 设置 cateId 为 null
			        this.selectName = ''; // 清空 selectName
			        this.page = 1; // 重置页码
			        this.list = []; // 重置列表
					this.lists(); // 获取新数据
			    } else {
			        this.selectedIndex = index; // 切换选中状态
			        this.cateId = item.id; // 设置 cateId
			        this.selectName = item.name; // 设置选中的名称
			        this.page = 1; // 重置页码
			        this.list = []; // 重置列表
			        this.lists(); // 获取新数据
			    }
			},
			change(e) {
				this.placeholder = e.name;
			},
			setActive(id) {
				this.activeIndex = id;
				uni.navigateTo({
					url: "/pages/home/PersonalData/PersonalData?id=" + id
				})
			},
			gotoP(id) {
				uni.reLaunch({
					url: "/pages/home/PersonalData/PersonalData?id=" + id
				})
			},
			getCateList() {
				this.$api.getCategory().then(res => {
					this.cateList = res.data;
				})
			},
			// selectItem(item) {
			// 	this.cateId = item.id;
			// 	this.selectName = item.name;
			// 	this.page = 1; // 重置页码
			// 	this.list = []; // 重置列表
			// 	this.lists(); // 获取新数据
			// },
			lists() {
				this.status = 'loading';
				this.$api.lists({
						limit: this.limit,
						page: this.page,
						cate_id: this.cateId,
						nickname: this.searchValue
					})
					.then(res => {
						if (res.data && res.data.data.length < 1) {
							this.status = 'noMore';
							console.log(1, 'nn')
							// this.list = ''
						} else {
							let resList = res.data.data;
							this.list = this.list.concat(resList);
							this.status = 'more';
							this.page += 1; // 增加页码
							console.log(2, 'wx')
						}
					})
					.catch(error => {
						console.error("请求出错:", error);
						this.status = 'more';
					});
			},
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.active {
		// border-color: #ff6600 !important;
		border-radius: 10rpx;
	}

	#found {
		width: 95%;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		// border: 1px #000 solid;
	}

	.found_search {
		width: 100%;
		line-height: 4;
		padding: 40rpx 20rpx 10rpx 20rpx;
		background-color: #ffffff;
	}

	.found_select {
		width: 80%;
		margin: auto;
		margin-top: 60rpx;
		border: 1px #ddd solid;

		.selectInput {
			width: 90%;
			height: 80rpx;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.found_select_option {
		width: 75%;
		margin-top: 4rpx;
		// border: 1px #000 solid;
		position: absolute;
		top: 250rpx;
		z-index: 999;
		background: #fff;
		box-shadow: -1px 6px 10px rgba(0, 0, 0, 0.2);
		/* 块阴影 */
		transition: box-shadow 0.3s;

		/* 增加过渡效果 */
		view {
			line-height: 2.5;
			text-indent: 1rem;
		}
	}

	.found_content {
		width: 100%;
		display: inline-block;
		box-shadow: 3px 6px 7px 2px #ededed;
		border: 2px solid transparent;

		// display: flex;
		.found_content_img {
			width: 100%;
			height: 40vw;
			/* 通过设置高度为宽度的25%来实现4:1的比例 */
			position: relative;
			/* 为了让内部的image相对定位 */
			overflow: hidden;
			/* 隐藏超出容器的部分 */
			// margin: 10rpx 0;

			image {
				width: 100%;
				height: auto;
				/* 保持图像的宽高比 */
				position: absolute;
				/* 绝对定位以覆盖整个容器 */
				top: 50%;
				/* 垂直居中 */
				left: 50%;
				/* 水平居中 */
				transform: translate(-50%, -50%);
				/* 调整偏移，使图像中心对齐 */
			}
		}

		.found_content_text {
			line-height: 50rpx;

			.found_content_text_img {
				// width: 100%;
				// height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.found_content_text_text {
				// background-color: #ffff00;
				// height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				font-size: 32rpx;

				.fontsizess {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
					display: flex;
					align-items: center;

					.title {
						display: inline-block;
						width: 80rpx;
						// height: 40rpx;
						margin-left: 20rpx;
						background-color: #ff6600;
						border-radius: 5rpx;
						text-align: center;
						line-height: 40rpx;
						color: #fff;
						font-size: 20rpx;
					}
				}

				.fontsize {
					color: #4c4c4c;
					margin: 10rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 这里是超出几行省略 */
					overflow: hidden;
				}
			}

			image {
				width: 80%;
				height: 70%;
				border-radius: 200rpx;
			}
		}
	}



	.container {
		padding: 20rpx;
		width: 100%;
		border-radius: 10rpx;
		background-color: #f6f6f6;
	}

	.scroll-view {
		display: flex;
		background-color: #ffffff;
		border-radius: 20rpx;
		// overflow-x: auto; /* 允许横向滚动 */
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		width: calc(100% - 0rpx);
		/* 使得可以放下多余的项目 */
	}

	.item {
		width: 25%;
		/* 每行4个 */
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.item-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		/* 可选：圆角 */
	}

	.item-text {
		text-align: center;
		margin-top: 10rpx;
		font-size: 27rpx;
		padding-bottom: 20rpx;
	}

	.selected {
		background-color: #f9f9f9;
		/* 选中时的背景颜色 */
		border-radius: 20rpx;
		/* 可选：圆角 */
		color: #ff6600;
	}
</style>